<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>VUE样式绑定-传入数组</title>
        <style type="text/css">
            .active {
                background-color: cadetblue
            }
            .logo {
                font-size: 20pt
            }
            .deal {
                color: tomato
            }
            .end {
                color: darkgray
            }
        </style>
        <script type="text/javascript" src="https://unpkg.com/vue/dist/vue.js"></script>
    </head>
    <body>
        <div id="app">
            <div :class="[activeClass, logoClass]">
                状态：新建
            </div>
            <div :class="[activeClass, logoClass, isDeal ? dealClass : endClass]">
                状态：处理
            </div>
            <input type="checkbox" v-model="isDeal"/>处理中...
        </div>
    </body>
    <script type="text/javascript">
        var vueObj = new Vue({
            el: '#app',
            data: {
                activeClass: 'active',
                logoClass: 'logo',
                isDeal: true,
                dealClass: 'deal',
                endClass: 'end'
            }
        });
    </script>
</html>